<template>
  <div class="warpc">
    <div>
    <span class="iconfont icon-zuojiantou nihao" @click="fun()"></span>
      <div v-for="(v,i) in arr" :key="i" class="contentask">
        <div class="oneline">
          <div>
            <span class="oneask">问</span>
            <span  class="askcont">{{v.title}} {{v.text}}  </span>
          </div>
          <span class="asknum">9 个问答</span>
        </div>
        <div class="twoline">
          <div class="answer">
            <span class="da">答</span>
            <div  class="answercont">
              <div class="answercontimg">
                <img src="chenkong/imgs/usk/2-1.gif" alt="" />
                <span>{{v.next}}</span>
                <img  src="chenkong/imgs/usk/1.gif" alt="" /><span class="assed"
                  >评价后回答</span
                >
              </div>
              <span>{{v.text}}</span>
            </div>
          </div>
          <div class="dz"><img src="chenkong/imgs/usk/3.gif" alt="" /></div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
    data(){
        return{
           arr: [
            {title:"请问一下花可以保持多久不干枯呢？", next:"火花", text:"鲜花一般可以保持新鲜一周"},
            {title:"送爱人的花可以选择哪一朵呢？有推荐吗？", next:"庆余年",text:"玫瑰可以的"},
            {title:"效果图咋样呀，看看图片",next:"伪装者",text:"图片大  实物没这么大"}
           ]
        }
    },
    methods:{
       fun(){
            this.$router.go(-1)

    }
    },
};
</script>

<style lang="scss" scoped>
.warpc {
  width: 100%;

  .contentask {
    margin: auto;
    width: 90%;
    // background: green;
    line-height: 6.667vw;
    font-size: 3.2vw;
    padding-bottom: 5.333vw;
    border-bottom: 0.267vw solid #f2f2f2;
    margin-top: 4.267vw;

    .oneline {
      display: flex;
      justify-content: space-between;

      .oneask {
        color: #fff;
        padding: 0.8vw;
        background: #f66c38;
      }
      .askcont {
        font-weight: bold;
        font-size: 3.733vw;
        padding-left: 1.6vw;
      }
      .asknum {
        color: #c3c3c3;
      }
    }
    .twoline {
      margin-top: 4.267vw;
      display: flex;
      justify-content: space-between;

      .answer {
        display: flex;
        .da {
          color: #fff;
          padding: 0.8vw;
          background: #7db2d9;
          height: 4.507vw;
          line-height: 4.507vw;
        }
        .answercont {
          padding-left: 1.6vw;
          .answercontimg {
            display: flex;
            img {
              vertical-align: middle;
              padding: 0 1.067vw;
            }
            .assed {
              font-size: 2.667vw;
              // padding: 0.8vw;
              margin-top: 1.6vw;
              text-align: center;
              width: 16vw;
              height: 4vw;
              line-height: 4vw;
              border: 0.267vw solid #e8a298;
              color: #e8a298;
            }
          }
        }
      }
    }
  }
}
</style>